<template>
  <div class="container-room" >
	<!-- 头部 -->
	<van-nav-bar
	left-text="返回"
	left-arrow
	@click-left="onClickLeft">
		<template #title>
			我的下级
		</template>
		<template #right>
			<div @click="toUser" class="nav-img"><img src="../assets/user.png" ></div>
		</template>
	</van-nav-bar>
	<!-- 列表区域 -->
	<van-list
		v-model="loading"
		:finished="finished"
		finished-text="没有更多了"
		@load="reLoadData"
		:immediate-check="false"
		offset="10"
		v-if="levelerList.length>0"
	>
	<div class="lower-list">
		<div class="lower-item" @click="to_detail(item.id)" v-for="item in levelerList" :key="item.id">
			<div class="item-left">
				<div class="lower-pic">
					<img v-if="item.salesManSex==1" src="../assets/men.png" alt="">
					<img v-else src="../assets/women.png" alt="">
				</div>
				<div class="lower-name">昵称:{{item.salesManNickName}}</div>
			</div>
			<div class="item-right">
				<!-- 等级 -->
				<div class="userleve" v-if="item.salesManIdentity == 0">
					等级：兼职业务员
				</div>
				<div class="userleve" v-if="item.salesManIdentity == 1">
					等级：业务员
				</div>
				<div class="userleve" v-if="item.salesManIdentity == 2">
					等级：主管
				</div>
				<div class="userleve" v-if="item.salesManIdentity == 3">
					等级：资深主管
				</div>
				<div class="userleve" v-if="item.salesManIdentity == 4">
					等级：经理
				</div>
			</div>
			
		</div>
	</div>
	</van-list>
	<div class="hasNone" v-else>
		<div class="pic">
			<img src="../assets/nolow.png" alt="">
			<span>抱歉，您暂无下级</span>
		</div>
	</div>
	<!-- 通用底部 -->
	<div class="foot" :class="levelerList.length<8?'on':''">
		<foot-message></foot-message>
	</div>
  </div>
</template>
<script>
import {levelList} from "@/api/user";
import FootMessage from '@/components/foot-message/index.vue'
import{mapActions,mapState} from "vuex"
import {recommroomList} from "@/api/room"
import HeadMessage from '@/components/head-message/index.vue'
export default {
	components:{
		HeadMessage,
		FootMessage
	},
  data(){
    return{
		
		loading: false,
      	finished: false,
        levelFrom:{
			pageNumber:1,
			pageSize:10,
			type:-1
        },
        levelerList:[]
    }
  },
 
  created(){
	// 请求店铺数据
	this.loadData()
  },
  
  methods:{
	// 店铺数据
	loadData(){
		const{levelFrom }=this
		// 如果 关键字存在  才存入Vuex
		levelList({
			pageNumber:levelFrom.pageNumber,
			pageSize:levelFrom.pageSize,
			type:levelFrom.type
		}).then(res=>{
			console.log(res)
			// 店铺数组
			this.levelerList = res.current === "1" ? res.records : [...this.levelerList, ...res.records];
			console.log(this.roomList)
			// console.log(this.roomList)
			this.loading = false;
			// 如果
			if (this.levelerList >= res.total) {
				this.finished = true;		// 结束加载状态
			}else if(res.records.length>0){
				this.finished = false;
			}else if(res.records.length==0){
				this.finished = true;		
			}
		})
       
	},
	// 页码数++，重新加载数据
	reLoadData(){
		this.loading = true;
		const{levelFrom}=this
		levelFrom.pageNumber+=1
		this.loadData()
	},
	// 返回上一级
	onClickLeft(){
		this.$router.go(-1);
	},
	// 去用户信息
	toUser(){
		this.$router.push({path:"/user"})
	},
	

  }
}
</script>

<style lang="less" scoped>
// 顶部样式
/deep/.van-nav-bar__text{
	color: #333;
}
/deep/.van-nav-bar{
	.van-icon{
		color: #333;
	}
}
.nav-img{
	img{
		width: 0.39rem;
		height: 0.39rem;
	}
}
.title-logo{
	width: 1.92rem;
	height: 0.46rem;
}
// 列表
// .lower-list{
// 	padding-bottom: 1.5rem;
// }
.lower-item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	margin: 0.15rem 0;
	padding: 0.2rem;
	font-size: 0.24rem;
	.item-left{
		display: flex;
		justify-content: center;
		align-items: center;
		.lower-pic{
			width: 1rem;
			height: 1rem;
			margin-right: 0.15rem;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.lower-name{
			flex: 1;
			color: #616161;
		}
	}
}
// 缺省
.hasNone{
	padding: 2rem 0;
	display: flex;
	justify-content: center;
	.pic{
		position: relative;
	}
	span{
		font-size: 0.28rem;
		margin-top: 0.2rem;
		position: absolute;
		bottom: 0.6rem;
		display: block;
		width: 100%;
		text-align: center;
	}
}
.foot.on{
	position: absolute;
	bottom: 0;
}
</style>